<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta charset="utf-8">
    <title>支持前进后退的选项卡</title>
    <!--demo展示所用css，不用关心 begin-->
    <link rel="stylesheet" type="text/css" href="../../../assets/reset.css" />
    <style>
        .section {
            padding:1em 3px;
        }
        .section h2 {
            font-size: 16px;
            font-weight: bold;
            padding: 5px 5px;
            color: #5b5b5b;
        }
    </style>
    <!--demo展示所用css end-->
    <!--组件依赖css begin-->
    <link rel="stylesheet" type="text/css" href="../../../assets/transitions.css" />
    <link rel="stylesheet" type="text/css" href="../../../assets/loading.default.css" />     <!--展示loading-->
    <link rel="stylesheet" type="text/css" href="../../../assets/widget/tabs/tabs.css" />
    <link rel="stylesheet" type="text/css" href="../../../assets/widget/tabs/tabs.default.css" />
    <!--组件依赖css end-->
    <!--组件依赖js begin-->
    <script type="text/javascript" src="../../../dist/zepto.js"></script>
    <script type="text/javascript" src="../../../src/extend/touch.js"></script>
    <script type="text/javascript" src="../../../src/extend/highlight.js"></script>
    <script type="text/javascript" src="../../../src/extend/matchMedia.js"></script>
    <script type="text/javascript" src="../../../src/extend/event.ortchange.js"></script>
    <script type="text/javascript" src="../../../src/core/gmu.js"></script>
    <script type="text/javascript" src="../../../src/core/event.js"></script>
    <script type="text/javascript" src="../../../src/core/widget.js"></script>
    <script type="text/javascript" src="../../../src/widget/tabs/tabs.js"></script>
    <script type="text/javascript" src="../../../src/widget/tabs/$swipe.js"></script>
    <script type="text/javascript" src="../../../src/widget/tabs/$ajax.js"></script>
    <!--组件依赖js end-->
</head>
<body>
<div class="section">
    <h2>可以前进后退</h2>
    <div id="container">
        <div id="tabs1">
            <ul>
                <li><a href="../../data/tabs/proxy.php?file=sample.html">Ajax1</a></li>
                <li><a href="../../data/tabs/proxy.php?file=sample.html">Ajax2</a></li>
                <li><a href="../../data/tabs/proxy.php?file=sample.html">Ajax3</a></li>
                <li><a href="../../data/tabs/proxy.php?file=sample.html">Ajax4</a></li>
                <li><a href="../../data/tabs/proxy.php?file=sample.html">Ajax5</a></li>
            </ul>
        </div>
    </div>
</div>
<script>
    window.scrollTo(0, 1);//收起地址栏

    var flag = false, active =  /^#tabs(\d+)$/.test(location.hash) && parseInt(RegExp.$1)-1 || 0;
    $('#tabs1').tabs({
        active: active,
        activate: function(e, to){
            var index = to.index+1;
            if(flag)return ;
            setTimeout(function(){//马上就改变hash的话在android里面会影响动画执行。原因不明
                if (typeof(window.history.pushState) == 'function') {
                    history.pushState(null, 'tab '+index, '#tabs'+index);
                } else {
                    window.location.hash = '#tabs'+index;
                }
            }, $.os.android?400:0);
        }
    });
    $(window).on('hashchange popstate', function(event){
        var index = /^#tabs(\d+)$/.test(location.hash) && parseInt(RegExp.$1)-1 || 0;
        setTimeout(function(){//android下hash一变不能马上开始动画，否则会有影响！原因不明
            flag = true;//标记一下，手动切换过去不用载入history纪录
            $('#tabs1').tabs('switchTo', index);
            flag = false;
        }, $.os.android?400:0);
    });
</script>
</body>
</html>
